<template>
  <div>
    <!-- 搜索 -->
    <div class="search">
      <div class="components-input-demo-presuffix">
        <a-input
          v-model:value="userName"
          placeholder="Basic usage"
          maxlength="200px"
        >
          <template #prefix>
            <user-outlined type="user" />
          </template>
          <template #suffix>
            <a-tooltip title="Extra information">
              <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
            </a-tooltip>
          </template>
        </a-input>
        <br />
      </div>
      <div>
        <a-select
          ref="select"
          style="width: 120px"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="dream">dream</a-select-option>
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </a-select>
      </div>
      <div>
        <a-select
          show-search
          placeholder="Select a person"
          style="width: 200px"
          :options="options"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
        ></a-select>
      </div>
    </div>
    <!-- table -->
    <!-- <a-table
      :columns="tableArr"
      :data-source="data"
      :pagination="{ pageSize: 50 }"
      :scroll="{ y: 600 }"
    >
      
    </a-table> -->

    <a-table :columns="tableArr" :data-source="data" bordered>
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'name'">
          <img
            :src="record.star == 0 ? star0 : star1"
            width="25"
            height="25"
          /><span>{{ text }}--{{ record.star }}</span>
        </template>

        <template v-if="column.dataIndex === 'runs'">
          <span :class="record.runs == 0 ? 'await' : 'runing'">{{
            record.runs == 0 ? "未开启" : "进行中"
          }}</span>
        </template>
      </template>
    </a-table>
  </div>
</template>
<!-- '../../image/star0.png' -->
<script>
import star0 from "../../image/star0.png";
import star1 from "../../image/star1.png";

export default {
  name: "formbal",
  setup() {
    const tableArr = [
      {
        title: "项目名称",
        dataIndex: "name",
        key: 1,
        width: 150,
      },
      {
        title: "所属分组",
        dataIndex: "grouping",
        width: 150,
      },
      {
        title: "项目负责人",
        dataIndex: "principal",
      },
      {
        title: "服务客户",
        dataIndex: "client",
      },
      {
        title: "项目成员",
        dataIndex: "member",
      },
      {
        title: "项目状态",
        dataIndex: "runs",
      },
      {
        title: "项目开始时间",
        dataIndex: "begin",
      },
      {
        title: "项目结束时间",
        dataIndex: "end",
      },
      {
        title: "创建人",
        dataIndex: "creator",
      },
      {
        title: "创建时间",
        dataIndex: "creationTime",
      },
    ];
    const data = [
      {
        key: 1,
        star: 0,
        name: `名称`,
        grouping: `第组`,
        principal: `负责人号`,
        client: `客户`,
        member: `成员`,
        runs: 0,
        begin: `2022-10-12`,
        end: `2022-11-12`,
        creator: `创建人`,
        creationTime: `2022-09-12`,
      },
      {
        key: 2,
        star: 1,
        name: `名称`,
        grouping: `第组`,
        principal: `负责人号`,
        client: `客户`,
        member: `成员`,
        runs: 1,
        begin: `2022-10-12`,
        end: `2022-11-12`,
        creator: `创建人`,
        creationTime: `2022-09-12`,
      },
      {
        key: 3,
        star: 0,
        name: `名称`,
        grouping: `第组`,
        principal: `负责人号`,
        client: `客户`,
        member: `成员`,
        runs: 0,
        begin: `2022-10-12`,
        end: `2022-11-12`,
        creator: `创建人`,
        creationTime: `2022-09-12`,
      },
      {
        key: 4,
        star: 0,
        name: `名称`,
        grouping: `第组`,
        principal: `负责人号`,
        client: `客户`,
        member: `成员`,
        runs: 1,
        begin: `2022-10-12`,
        end: `2022-11-12`,
        creator: `创建人`,
        creationTime: `2022-09-12`,
      },
      {
        key: 5,
        star: 1,
        name: `名称`,
        grouping: `第组`,
        principal: `负责人号`,
        client: `客户`,
        member: `成员`,
        runs: 0,
        begin: `2022-10-12`,
        end: `2022-11-12`,
        creator: `创建人`,
        creationTime: `2022-09-12`,
      },
    ];
    // const data = [...Array(100)].map((_, i) => ({
    //   key: i,
    //   name: `Edward King ${i}`,
    //   grouping: `第${i}组`,
    //   principal: `负责人${i}号`,
    //   client: `客户${i}`,
    //   member: `成员${i}`,
    //   runs: `进行中`,
    //   begin: `开始时间`,
    //   end: `结束时间`,
    //   creator: `创建人${i}`,
    //   creationTime: `创建时间`,
    // }));
    return {
      data,
      tableArr,
      star0,
      star1,
    };
  },
};
</script>
<style lang="less" scoped>
// 项目状态切换
.runing {
  width: 100px;
  height: 30px;
  background-color: rgba(198, 194, 199, 0.301);

  color: #000;
}

.await {
  width: 100px;
  height: 30px;
  color: #000;
  background-color: rgb(47, 92, 45);
}
</style>
